<template>
    <view id="leftNav">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
                     @scroll="scroll" show-scrollbar="true" lower-threshold="3rem" upper-threshold="3rem">
            <view :style="'height:'+ navHeight + 'rem;'">
                <navigator
                        v-for="(item,index) in navData"
                        hover-class="navigator-hover"
                        :key="index"
                        @click="navBtn(index)"
                        class="navigatorBox"
                        :style="'color:'+ item.color + ';'+ 'background-color:'+item.backgroundColor +';'+'font-weight:'+item.fontWeight"

                >
                    {{item.name}}
                </navigator >
            </view>
        </scroll-view>

    </view>
</template>

<script>
    import * as api from '../../until/api'
    export default {
        name: "leftNav",
        props:['pageKey'],//获取缓存接口。。。
        data(){
            return{
                pageData:[],
                scrollTop: 0,
                old: {
                    scrollTop: 0
                },
                navHeight:0,
            }
        },
        computed:{
            navData(){
                return this.pageData
            },
        },
        methods:{
            navBtn(index){
                if(this.pageData[index].color === 'black' || index === index){
                    this.pageData.map(item=>{
                        item.color = 'black'
                        item.backgroundColor = ''
                        item.fontWeight = ''
                        return item
                    })
                    this.pageData[index].color = '#17B357'
                    this.pageData[index].backgroundColor = '#FEFEFE'
                    this.pageData[index].fontWeight = 'bold'
                    uni.navigateTo({
                        url:"../../pages/fruit/fruit"
                    })
                }else {
                    this.pageData[index].color = 'black'
                    this.pageData[index].backgroundColor = ''
                    this.pageData[index].fontWeight = ''
                }
            },
            upper: function(e) {
                //console.log(e)
            },
            lower: function(e) {
                //console.log(e)
            },
            scroll: function(e) {
                //console.log(e)
                this.old.scrollTop = e.detail.scrollTop
            },
            // getClassFun(key){
            //     let pageClassData = []
            //     uni.getStorage({//发起请求，获取本地数据
            //         key: key,
            //         success:  resp=>{
            //             pageClassData = resp.data
            //         }
            //     })
            //     console.log(pageClassData)
            //     return pageClassData
            // }
        },
        mounted() {
            //const _this = this  我太难了!!!!!!!!!!!!!!
            uni.getStorage({//发起请求，获取本地数据
                key: this.pageKey,
                success: resp=>{
                    this.pageData = resp.data
                    this.pageData[0].color = '#17B357'
                    this.pageData[0].backgroundColor = '#FEFEFE'
                    this.pageData[0].fontWeight = 'bold'
                    this.navHeight = Number(this.pageData.length * 2.4 + 8)
                    console.log(this.pageData)
                }
            })
        }
    }
</script>

<style scoped>
    body{
        width: 10rpx;
        height: 10rpx;
        font-size: 16rpx;
    }
    #leftNav{
        width: 100%;
    }
    .scroll-Y{
        width: 100%;
        background-color: #F5F5F6;
        overflow: hidden;
        height: 34.5rem;
    }
    .navigatorBox{
        width: 98%;
        text-align: center;
        display: inline-block;
        height: 2.4rem;
        line-height: 2.4rem;
        font-size: 0.8rem;
    }
</style>